<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        
        <Home
        :title='title'
        msg='wh2110-yyds'
        >
        <!-- 下面的v-slot:demo可以缩写成#demo -->
        <template v-slot:demo>
            <div>
                <h2>你好啊</h2>
                <h1>你好吗</h1>
            </div>
        </template>
    </Home>
    <user></user>


    <!-- 这里就是作用域插槽发散出来父组件接收的位置 -->
    <!-- scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来 info:{
                        username:'老鼠不会飞',
                        age:24,
                        word:'今年找到工作'}-->
    <user>
        <template #default='scope'>
            <div>
                <h2>{{scope.info.word}}</h2>
            </div>
        </template>
    </user>
    </div>
    
    
    <template id="home">
        <div>
            <h2>home-home</h2>
            <p>武汉千峰</p>
            <p>props--{{title}}</p>
            <div>
                <slot name='demo'></slot>
            </div>
            
            <!-- 有name是居名插槽 可以分开精准投放 -->
            <div>
                <slot name='demo'></slot>
            </div>
        </div>
    </template>

        <!-- 作用域插槽就是由子组件发散出去父组件接收控制子组件显示的东西 -->
        <template id="user">
            <div>
                <h2>用户:{{info.username}}</h2>    
                <slot :info='info'>
                    我的名字是： {{info.username}}
                </slot>          
            </div>           
        </template>

    <script>
        Vue.component('Home', {
            template: '#home',
            props:['msg','title']
        });

         Vue.component('User',{
            template:'#user',
            data(){
                return{
                    info:{
                        username:'老鼠不会飞',
                        age:24,
                        word:'今年找到工作'
                    }
                }
            }    
        });

        let vm = new Vue({
            data() {
                return {
                    title: 'Vue组件插槽',
                };
            },
        }).$mount('#app');
    </script>
    <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
    -->
</body>

</html>